Bootstrap Snippet Modal using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-12 mb30">
      <div class="service-box4 text-center">
        <h4>Customer Engagement </h4>
        <div class="hidden">
            <div class="details">
                <h5>Customer Engagement</h5>
                <ul class="list-unstyled">
                  <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/customer-service">Customer Service </a></li>
                  <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/technical-support">Technical Support  </a></li>
                  <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/live-chat">Live Chat </a></li>
                  <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/social-media">Social Media</a></li>
                  <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/email">Email </a></li>
                </ul>
            </div>
        </div>
     </div>
     </div>
      <div class="col-md-4 col-sm-12 mb30">
          <div class="service-box4 text-center">
            <h4>Data Marketing  </h4>
            <div class="hidden">
                <div class="details">
                    
                    <h5>Data Marketing</h5>
                <ul class="list-unstyled">
                  <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/lead-generation">Lead Generation </a></li>
                  <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/data-validation">Data Validation </a></li>
                </ul>
                </div>
            </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.service-box4{
    background: #fff;
    border-radius: 6px;
    box-shadow: rgb(0 0 0 / 25%) 0px 25px 50px -12px;
    padding: 15px 25px;
    position: relative;
    min-height: 140px;
    text-align:center;
    align-items: center;
    display: grid;
    cursor:pointer;
}
.hidden{
    display:none;
}
.modal-body {
  padding: 25px;
}
.modal .close {
  color: #ecaa2b;
  opacity: 1;
  font-weight: 100;
  border: 1px solid #ecaa2b;
  border-radius: 50%;
  padding: 2px 6px;
  position: absolute;
  right: 5px;
  top: 5px;
}
.modal .close span {
  position: relative;
  top: -2px;
}
.modal .modal-dialog {
  margin: 40px 0px !important;
  max-width: 600px;
  width: 90%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
$('.service-box4').click(function(){
      event.preventDefault();
      var allDetails = $(this).find('.details').html();
      console.log(allDetails);
      $('#alldetails').html(allDetails);
      $('#myModal').modal('show'); 
      //myModal.play();
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Modal"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Modal" Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Modal"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY